<template>
<div id='user'>
  <!-- 新增用户按钮 -->
  <Button type='primary' @click.native="addUser">新增用户</Button>
  <Divider />

  <!-- 用户列表 -->
  <div>
    <Table border :columns="userTableHead" :data="list"></Table>
  </div>

  <!-- 新增用户模态框 -->
  <UserAdd :addSta="addSta" @changeAddSta="changeAddSta"></UserAdd>

  <!-- 角色设置模态框 -->
  <!-- <UserRole></UserRole> -->

  <!-- 编辑用户 -->
  <!-- <UserEdit></UserEdit> -->
</div>
</template>

<script>
import UserAdd from '../../components/UserAdd' // 用户新增
// import UserRole from '../../components/UserRole' // 角色设置
// import UserEdit from '../../components/UserEdit' // 用户编辑

export default {
  name: 'User',
  data () {
    return {
      // user列表表头
      userTableHead: [{
        title: '用户ID',
        key: 'id',
        align: 'center'
      },
      {
        title: '用户名',
        key: 'name',
        align: 'center'
      },
      {
        title: '创建时间',
        key: 'crtime',
        align: 'center'
      },
      {
        title: '修改时间',
        key: 'chtime',
        align: 'center'
      },
      {
        title: '操作',
        key: 'handle',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h(
              'Button', {
                type: 'Button',
                class: 'ivu-btn ivu-btn-warning',
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    this.userRoleSet(params.row._id)
                  }
                }
              },
              '角色设置'
            ),
            h(
              'Button', {
                type: 'Button',
                class: 'ivu-btn ivu-btn-info',
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    this.userEdit(params.row._id)
                  }
                }
              },
              '编辑用户'
            ),
            h(
              'Button', {
                type: 'Button',
                class: 'ivu-btn ivu-btn-error',
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    this.userRemove(params.row._id)
                  }
                }
              },
              '删除'
            )
          ])
        }
      }
      ],
      // 用户列表
      list: [],
      // 新增模态框状态
      addSta: false,
      // 详情模态框状态
      detailSta: false
    }
  },
  created () {
    let _self = this
    // 请求用户列表
    let obj = {}
    this.$axios.post('/acl/userList', obj).then(res => {
      console.log(res.data)
      if (res.data) {
        _self.list = res.data
      } else {
        _self.$Message.info('请求用户列表失败')
      }
    })
  },
  mounted () {},
  computed: {},
  methods: {
    // 新增用户
    addUser () {
      this.addSta = true
    },
    // 角色设置
    userRoleSet (id) {
      console.log(id)
    },
    // 编辑用户
    userEdit (id) {
      console.log(2, id)
    },
    // 删除用户
    userRemove (id) {
      console.log(id)
    },
    // 修改新增模态框状态
    changeAddSta (status) {
      console.log(123)
      this.addSta = status
    }
  },
  components: {
    UserAdd
  }
}
</script>
